<template>
  <div class="erp-content">
    <!-- 页面标题和快捷操作 -->
    <div class="content-header">
      <div class="header-title">
        <h1>仪表盘</h1>
        <p>实时监控业务数据与系统状态</p>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="handleAddTask">
          <PlusOutlined />
          新建任务
        </a-button>
        <a-button style="margin-left: 12px" @click="refreshData">
          <sync-outlined :spin="refreshing" />
          刷新数据
        </a-button>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <a-row :gutter="16" class="stats-row">
      <a-col :span="6" :xs="12" :xl="6">
        <a-card class="stat-card" hoverable>
          <div class="stat-card-content">
            <div class="stat-info">
              <p class="stat-label">今日销售额</p>
              <h3 class="stat-value">¥248,632</h3>
              <div class="stat-trend up">
                <ArrowUpOutlined /> 12.5%
                <span class="trend-compare">较昨日</span>
              </div>
            </div>
            <div class="stat-icon sales">
              <DollarOutlined />
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="6" :xs="12" :xl="6">
        <a-card class="stat-card" hoverable>
          <div class="stat-card-content">
            <div class="stat-info">
              <p class="stat-label">订单数量</p>
              <h3 class="stat-value">186</h3>
              <div class="stat-trend up">
                <ArrowUpOutlined /> 8.2%
                <span class="trend-compare">较昨日</span>
              </div>
            </div>
            <div class="stat-icon orders">
              <ShoppingCartOutlined />
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="6" :xs="12" :xl="6">
        <a-card class="stat-card" hoverable>
          <div class="stat-card-content">
            <div class="stat-info">
              <p class="stat-label">库存预警</p>
              <h3 class="stat-value">14</h3>
              <div class="stat-trend down">
                <ArrowDownOutlined /> 3.1%
                <span class="trend-compare">较昨日</span>
              </div>
            </div>
            <div class="stat-icon inventory">
              <WarningOutlined />
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="6" :xs="12" :xl="6">
        <a-card class="stat-card" hoverable>
          <div class="stat-card-content">
            <div class="stat-info">
              <p class="stat-label">客户新增</p>
              <h3 class="stat-value">27</h3>
              <div class="stat-trend up">
                <ArrowUpOutlined /> 15.3%
                <span class="trend-compare">较昨日</span>
              </div>
            </div>
            <div class="stat-icon customers">
              <UserAddOutlined />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 图表区域 -->
    <a-row :gutter="16" class="charts-row">
      <a-col :span="16">
        <a-card title="销售趋势分析" class="chart-card">
          <div class="chart-container">
            <canvas id="salesChart" width="400" height="200"></canvas>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="8">
        <a-card title="订单来源分布" class="chart-card">
          <div class="chart-container">
            <canvas id="orderSourceChart" width="200" height="200"></canvas>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 最近任务和待办事项 -->
    <a-row :gutter="16" class="tasks-row">
      <a-col :span="12">
        <a-card title="最近订单" class="tasks-card">
          <a-table
            :columns="orderColumns"
            :data-source="recentOrders"
            :pagination="false"
            row-key="id"
          >
            <template #bodyCell="{ column, record }" >
              <a-tag v-if="column.dataIndex === 'status'" :color="record.status === '已完成' ? 'success' : record.status === '处理中' ? 'processing' : 'warning'">
                {{ record.status }}
              </a-tag>
            </template>
          </a-table>
          <div class="see-more">
            <a href="#" @click.prevent="viewAllOrders">查看全部订单</a>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="待办任务" class="tasks-card">
          <div class="todo-list">
            <div 
              class="todo-item" 
              v-for="task in todoTasks" 
              :key="task.id"
              :class="{ completed: task.completed }"
            >
              <a-checkbox v-model:checked="task.completed" @change="handleTaskChange(task)">
                {{ task.title }}
              </a-checkbox>
              <span class="task-deadline">{{ task.deadline }}</span>
            </div>
          </div>
          <div class="see-more">
            <a href="#" @click.prevent="viewAllTasks">查看全部任务</a>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import { 
  DollarOutlined, ShoppingCartOutlined, WarningOutlined, UserAddOutlined, 
   SyncOutlined, ArrowUpOutlined, ArrowDownOutlined,PlusOutlined
} from '@ant-design/icons-vue';
import Chart from 'chart.js/auto';

// 状态管理
const refreshing = ref(false);
const recentOrders = ref([
  {
    id: 'ORD-2023-0567',
    customer: '恒通贸易有限公司',
    amount: 24500,
    date: '2023-07-20',
    status: '已完成'
  },
  {
    id: 'ORD-2023-0568',
    customer: '远大科技集团',
    amount: 18750,
    date: '2023-07-20',
    status: '处理中'
  },
  {
    id: 'ORD-2023-0569',
    customer: '星辰电子有限公司',
    amount: 32600,
    date: '2023-07-20',
    status: '待发货'
  },
  {
    id: 'ORD-2023-0570',
    customer: '蓝天化工集团',
    amount: 15800,
    date: '2023-07-19',
    status: '已完成'
  },
  {
    id: 'ORD-2023-0571',
    customer: '绿地农业科技',
    amount: 9600,
    date: '2023-07-19',
    status: '已完成'
  }
]);

const todoTasks = ref([
  {
    id: 1,
    title: '审核恒通贸易的订单合同',
    deadline: '今天 14:00',
    completed: false
  },
  {
    id: 2,
    title: '更新产品库存报表',
    deadline: '今天 16:30',
    completed: false
  },
  {
    id: 3,
    title: '与远大科技洽谈合作细节',
    deadline: '明天 10:00',
    completed: false
  },
  {
    id: 4,
    title: '准备月度销售会议材料',
    deadline: '2023-07-25',
    completed: true
  },
  {
    id: 5,
    title: '处理星辰电子的退换货申请',
    deadline: '今天 17:00',
    completed: false
  }
]);

// 订单表格列定义
const orderColumns = [
  {
    title: '订单编号',
    dataIndex: 'id',
    key: 'id',
    width: 120
  },
  {
    title: '客户名称',
    dataIndex: 'customer',
    key: 'customer'
  },
  {
    title: '订单金额',
    dataIndex: 'amount',
    key: 'amount',
    render: (amount) => `¥${amount.toLocaleString()}`
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    width: 100
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  }
];

// 初始化图表
let salesChart = null;
let orderSourceChart = null;

onMounted(() => {
  initCharts();
});

// 初始化图表数据
const initCharts = () => {
  nextTick(() => {
    // 销售趋势图表
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    salesChart = new Chart(salesCtx, {
      type: 'line',
      data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        datasets: [
          {
            label: '2023年销售额',
            data: [125000, 190000, 165000, 210000, 240000, 280000, 248000],
            borderColor: '#1890ff',
            backgroundColor: 'rgba(24, 144, 255, 0.1)',
            tension: 0.4,
            fill: true
          },
          {
            label: '2022年销售额',
            data: [95000, 150000, 130000, 170000, 190000, 220000, 200000],
            borderColor: '#722ed1',
            backgroundColor: 'rgba(114, 46, 209, 0.05)',
            tension: 0.4,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              callback: function(value) {
                return '¥' + value.toLocaleString();
              }
            }
          }
        }
      }
    });

    // 订单来源图表
    const sourceCtx = document.getElementById('orderSourceChart').getContext('2d');
    orderSourceChart = new Chart(sourceCtx, {
      type: 'doughnut',
      data: {
        labels: ['线上商城', '销售人员', '合作伙伴', '客户推荐', '其他渠道'],
        datasets: [{
          data: [35, 25, 20, 15, 5],
          backgroundColor: [
            '#1890ff',
            '#52c41a',
            '#faad14',
            '#722ed1',
            '#f5222d'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
          }
        },
        cutout: '65%'
      }
    });
  });
};

// 刷新数据
const refreshData = () => {
  refreshing.value = true;
  
  // 模拟数据刷新
  setTimeout(() => {
    message.success('数据已更新');
    refreshing.value = false;
    
    // 随机更新一些数据
    recentOrders.value.forEach(order => {
      if (order.status === '处理中') {
        order.amount = Math.round(order.amount * (0.95 + Math.random() * 0.1));
      }
    });
    
    // 更新图表数据
    if (salesChart) {
      salesChart.data.datasets[0].data = salesChart.data.datasets[0].data.map(
        value => Math.round(value * (0.98 + Math.random() * 0.04))
      );
      salesChart.update();
    }
  }, 1200);
};

// 任务状态变更
const handleTaskChange = (task) => {
  if (task.completed) {
    message.success(`已完成: ${task.title}`);
  }
};

// 查看全部订单
const viewAllOrders = () => {
  message.info('跳转到订单列表页面');
  // 实际应用中这里会进行路由跳转
};

// 查看全部任务
const viewAllTasks = () => {
  message.info('跳转到任务管理页面');
  // 实际应用中这里会进行路由跳转
};

// 新建任务
const handleAddTask = () => {
  message.info('打开新建任务对话框');
  // 实际应用中这里会打开新建任务的模态框
};
</script>

<style lang="scss" scoped>
.erp-content {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 64px); // 减去顶部导航高度
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  
  .header-title {
    h1 {
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: #1f2329;
    }
    p {
      margin: 0;
      color: #6b7280;
      font-size: 14px;
    }
  }
  
  .header-actions {
    display: flex;
  }
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
  }
  
  .stat-card-content {
    display: flex;
    align-items: center;
    padding: 16px;
    
    .stat-info {
      flex: 1;
      
      .stat-label {
        margin: 0 0 8px 0;
        color: #6b7280;
        font-size: 14px;
      }
      
      .stat-value {
        margin: 0 0 4px 0;
        font-size: 24px;
        font-weight: 600;
        color: #1f2329;
      }
      
      .stat-trend {
        display: flex;
        align-items: center;
        font-size: 13px;
        
        &.up {
          color: #52c41a;
        }
        
        &.down {
          color: #f5222d;
        }
        
        .trend-compare {
          margin-left: 4px;
          color: #6b7280;
        }
      }
    }
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      
      &.sales {
        background-color: rgba(24, 144, 255, 0.1);
        color: #1890ff;
      }
      
      &.orders {
        background-color: rgba(82, 196, 26, 0.1);
        color: #52c41a;
      }
      
      &.inventory {
        background-color: rgba(250, 173, 20, 0.1);
        color: #faad14;
      }
      
      &.customers {
        background-color: rgba(114, 46, 209, 0.1);
        color: #722ed1;
      }
    }
  }
}

.charts-row {
  margin-bottom: 24px;
}

.chart-card {
  height: 100%;
  
  .chart-container {
    width: 100%;
    height: 300px;
  }
}

.tasks-row {
  margin-bottom: 24px;
}

.tasks-card {
  height: 100%;
  
  .see-more {
    margin-top: 16px;
    text-align: right;
  }
  
  .todo-list {
    .todo-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.completed {
        .ant-checkbox + span {
          color: #8c8c8c;
          text-decoration: line-through;
        }
      }
      
      .task-deadline {
        font-size: 12px;
        color: #6b7280;
        margin-left: 16px;
      }
    }
  }
}
</style>
